<template>
  <div>
    <div class='page-scan-mana'>
      <el-form :inline='true' :model='dataQueryForm' ref='dataQueryForm'>
        <div class='pc-page-header'>
          <el-form-item>
            <el-input
              v-model='dataQueryForm.topicNo'
              clearable
              class='pc-input3-col5'
              placeholder='输入话题编号'
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model='dataQueryForm.title'
              clearable
              class='pc-input3-col5'
              placeholder='请输入标题'
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model='dataQueryForm.isClosed'
              clearable
              placeholder='请选择状态'
              class='pc-input3-col5'
            >
              <el-option
                v-for='item in statusOption'
                :key='item.value'
                :label='item.label'
                :value='item.value'
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model='dataQueryForm.priority'
              clearable
              placeholder='请选择标签'
              class='pc-input3-col5'
            >
              <el-option
                v-for='item in statusPriority'
                :key='item.value'
                :label='item.label'
                :value='item.value'
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model='dataQueryForm.contactName'
              clearable
              class='pc-input3-col5'
              placeholder='请输入作者姓名'
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model='dataQueryForm.userNo'
              clearable
              class='pc-input3-col5'
              placeholder='请输入作者编号'
            ></el-input>
          </el-form-item>
          <el-form-item v-show='isshowMore'>
            <el-date-picker
              class='block'
              v-model='dataQueryForm.createdTime'
              type='daterange'
              range-separator='-'
              start-placeholder='发起开始日期'
              end-placeholder='发起结束日期'
              value-format='yyyy-MM-dd HH:mm:ss'
              @change='getDate'
            ></el-date-picker>
          </el-form-item>
          <el-form-item v-show='isshowMore'>
            <el-date-picker
              class='block'
              v-model='dataQueryForm.lastEditTime'
              type='daterange'
              range-separator='-'
              start-placeholder='更新开始日期'
              end-placeholder='更新结束日期'
              value-format='yyyy-MM-dd HH:mm:ss'
              @change='upDate'
            ></el-date-picker>
          </el-form-item>
          <el-form-item label>
            <el-button type='primary' @click='queryDataFn'>搜索</el-button>
            <el-button type='primary' @click="refresh('dataQueryForm')">刷新</el-button>
            <el-button type='primary' @click="issuetopic('发布话题', true, null)">发布</el-button>
            <el-dropdown>
              <span class='el-dropdown-link'>
                <el-button type='primary'>批量操作</el-button>
              </span>
              <el-dropdown-menu slot='dropdown'>
                <el-dropdown-item
                  v-for='(item,index) in operationList '
                  :key='index'
                  class='dropdownCl'
                  @click.native='batchOperateqList(index)'
                >{{item}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button class='el-dropdown-link' type='primary' @click='showMore()'>{{showMoreText}}</el-button>
          </el-form-item>
        </div>
      </el-form>
      <egrid
        border
        class='page-list'
        column-type='selection'
        :data='tableData'
        :columns='columns'
        :columns-props='columnsProps'
        @selection-change='selectionChange'
      ></egrid>
      <div class='pc-pagination-panel'>
        <pc-pagination
          ref='pcPagination'
          :url='pageUrl.queryDataList'
          :queryData='dataQueryForm'
          @on-query='queryCallBackFn'
        ></pc-pagination>

        <popup
          :is-show='showDialog'
          v-on:on-popup='batchOperateq'
          :popupindex='PopupIndex'
          :optionList='popupOptionList'
          :operationList='operationList'
          @on-close='showDialog = false'
        ></popup>

        <pc-dialog
          :is-show='isShowDetailDialog'
          :title='话题详情'
          @on-close='isShowDetailDialog = false'
        >
          <div>
            <detail :id='detailId'></detail>
          </div>
        </pc-dialog>

        <pc-dialog
          :is-show='isShowCredentialDialog'
          :title='dialogTitle'
          @on-close='isShowCredentialDialog = false'
        >
          <div>
            <Edit :isCloseOper='isCloseOper' :id='detailId' @sure='afterUpdateCredential()'></Edit>
          </div>
        </pc-dialog>
      </div>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
import PcPagination from 'components/form/pagination';
import PcButton from 'components/form/button';
import EgridCellView from 'components/wms/comm/EgridCellView.vue';
import { enums } from '../../../../utils/settings';
import PcDialog from '../../../../components/dialog/index.vue';
import Popup from './components/popup';
import Edit from './edit';
import Detail from './detail.vue';
let that;
// 求购编号链接详情
var demandNoLink = {
  template: ` <el-button class='demand-no' @click='viewdetail(row)' type='text' size='small'>{{this.row.title}}</el-button>`,
  props: ['row'],
  methods: {
    viewdetail(val) {
      that.detailId = val.id;
      this.$emit('demand-detail', val);
    }
  }
};
// 操作按钮
var Btn = {
  template: `<div style='display:flex; width: 100%;flex-wrap: wrap'>
        <template><el-button v-if='showUpdataDemand'  type='info' plain @click='updata(row)'>更新</el-button></template>
      </div>`,
  props: ['row'],
  computed: {
    // 是否显示更新按钮
    showUpdataDemand() {
      return !(this.row.source === enums.IBS_TOPIC_SOURCE.WECHAT);
    }
  },
  methods: {
    // 还原
    updata(val) {
      this.$emit('single-updata', val, '更新话题', false);
    }
  }
};

export default {
  data() {
    return {
      urlList: ['/ibs/web/bbs/batchTagManage', '/ibs/web/bbs/batchTopicManage'],
      PopupIndex: 0, // 0-置顶，1-精品，2-关闭，3-删除
      popupOptionList: ['111', '222'],
      showDialog: false,
      PopupShow: false,
      operateShow: false,
      isshowMore: false,
      showMoreText: '更多',
      detailId: '',
      isCloseOper: null,
      dialogTitle: '',
      isShowDetailDialog: false,
      isShowCredentialDialog: false,
      dataQueryForm: {
        userNo: null,
        title: null,
        topicNo: null,
        goodsName: null,
        createdTime: null,
        lastEditTime: null,
        contactName: null,
        lastOperator: null
      },
      tableData: [],
      columns: [
        {
          label: '话题编号',
          prop: 'topicNo',
          minWidth: 82
        },
        {
          label: '标题',
          // prop:'title',
          component: demandNoLink,
          listeners: {
            'demand-detail'(val) {
              that.viewDetailFn(val);
            }
          },
          minWidth: 282
        },
        {
          label: '状态',
          prop: 'isClosedDesc',
          minWidth: 82
        },
        {
          label: '标签',
          prop: 'priorityDesc',
          minWidth: 82
        },
        {
          label: '作者',
          prop: 'contactName',
          minWidth: 102
        },
        {
          label: '作者编号',
          prop: 'userNo',
          minWidth: 102
        },
        {
          label: '发起时间',
          prop: 'createdTime',
          minWidth: 142
        },
        {
          label: '最后更新时间',
          prop: 'lastEditTime',
          minWidth: 142
        },
        {
          label: '点赞数量',
          prop: 'likeNum',
          minWidth: 82
        },
        {
          label: '评论人数',
          prop: 'replyPersonNum',
          minWidth: 82
        },
        {
          label: '评论数量',
          prop: 'replyNum',
          minWidth: 82
        },
        {
          label: '操作',
          minWidth: 72,
          fixed: 'right',
          component: Btn, // 'el-button'
          listeners: {
            'single-updata'(data, title, flag) {
              that.singleUpdata(data, title, flag);
            }
          },
          propsHandler: function({ row, col, column }) {
            return { row, col, column };
          }
        }
      ],

      selecetedRows: [],
      // columnsProps 用于定义所有 columns 公共的属性，
      // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
      columnsProps: {
        height: 40,
        minWidth: 140,
        showOverflowTooltip: true,
        component: EgridCellView
      },
      statusOption: [
        {
          value: false,
          label: '正常'
        },
        {
          value: true,
          label: '关闭'
        }
      ],
      statusPriority: [
        {
          value: '1',
          label: '精品'
        },
        {
          value: '2',
          label: '置顶'
        }
      ],
      operationList: ['置顶', '精品', '关闭', '删除'],
      // 批量操作列表
      // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
      pageUrl: {
        queryDataList: '/ibs/web/bbs/queryBbsListWithPage'
      }
    };
  },
  components: {
    PcPagination,
    PcButton,
    PcDialog,
    Popup,
    Edit,
    Detail
  },
  created() {
    that = this;
  },

  methods: {
    // 发布时间
    getDate() {
      if (this.dataQueryForm.createdTime === null) {
        this.dataQueryForm.startDate = '';
        this.dataQueryForm.endDate = '';
      } else {
        this.dataQueryForm.startDate = this.dataQueryForm.createdTime[0];
        this.dataQueryForm.endDate = this.dataQueryForm.createdTime[1];
      }
    },
    // 更新时间
    upDate() {
      if (this.dataQueryForm.lastEditTime === null) {
        this.dataQueryForm.startEditDate = '';
        this.dataQueryForm.endEditDate = '';
      } else {
        this.dataQueryForm.startEditDate = this.dataQueryForm.lastEditTime[0];
        this.dataQueryForm.endEditDate = this.dataQueryForm.lastEditTime[1];
      }
    },
    // 表头样式
    getHeaderStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background: #f5f5f5; height: 50px';
      } else {
        return '';
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:rgb(245, 245, 245);';
      } else {
        return '';
      }
    },
    viewDetailFn(scopeRow) {
      this.isShowDetailDialog = true;
    },
    singleUpdata(scopeRow, title, isCloseOper) {
      this.detailId = scopeRow.id;
      this.dialogTitle = title;
      this.isCloseOper = isCloseOper;
      this.isShowCredentialDialog = true;
    },
    // 发布话题功能
    issuetopic(title, isCloseOper, id) {
      this.detailId = id;
      this.dialogTitle = title;
      this.isCloseOper = isCloseOper;
      this.isShowCredentialDialog = true;
    },
    viewCredentialFn(scopeRow, title, isCloseOper) {
      this.detailId = scopeRow.id;
      this.dialogTitle = title;
      this.isCloseOper = isCloseOper;
      this.isShowCredentialDialog = true;
    },
    showMore() {
      this.isshowMore = !this.isshowMore;
      if (this.isshowMore) {
        this.showMoreText = '收起';
      } else {
        this.showMoreText = '更多';
      }
    },
    afterUpdateCredential() {
      this.isShowCredentialDialog = false;
      this.$refs.pcPagination.queryListWithPageFn(false);
    },
    queryCallBackFn(res) {
      this.tableData = res.result.list;
    },
    queryDataFn() {
      this.$refs.pcPagination.queryListWithPageFn(true);
    },
    refresh(formName) {
      // 重置按钮
      this.$refs[formName].resetFields();
      this.dataQueryForm.demandNo = null;
      this.dataQueryForm.status = null;
      this.dataQueryForm.userNo = null;
      this.dataQueryForm.companyName = null;
      this.dataQueryForm.goodsName = null;
      this.dataQueryForm.createdTime = null;
      this.dataQueryForm.lastEditTime = null;
      this.dataQueryForm.startDate = null;
      this.dataQueryForm.startEditDate = null;
      this.dataQueryForm.endEditDate = null;
      this.dataQueryForm.priority = null;

      this.dataQueryForm.topicNo = null;
      this.dataQueryForm.title = null;
      this.dataQueryForm.contactName = null;
      this.dataQueryForm.lastOperator = null;
      this.dataQueryForm.isClosed = null;
      this.queryDataFn();
    },
    closePopup() {
      this.PopupShow = !this.PopupShow;
    },
    // 批量操作
    batchOperateqList(index) {
      if (index === 0) {
        this.popupOptionList = ['置顶', '取消置顶'];
      } else if (index === 1) {
        this.popupOptionList = ['设置精品', '取消精品'];
      } else if (index === 2) {
        this.popupOptionList = ['关闭话题', '启用话题'];
      }
      this.PopupIndex = index;
      this.operateShow = !this.operateShow;
      if (this.selecetedRows.length === 0) {
        this.errorTip('请先选择操作对象！');
        return '';
      } else {
        this.showDialog = true;
      }
    },
    // 请求后台数据
    batchOperateq(index, value) {
      // index：由子组件传出来 0->取消操作  1->确定操作
      // PopupIndex：0-置顶，1-精品，2-关闭，3-删除
      if (this.PopupIndex === 0) {
        if (index === 0) {
          this.batchOperate(0, 1, null, null, 1);
        } else {
          this.batchOperate(0, 2, null, null, 0);
        }
      } else if (this.PopupIndex === 1) {
        if (index === 0) {
          this.batchOperate(0, 3, null, null, 1);
        } else {
          this.batchOperate(0, 4, null, null, 0);
        }
      } else if (this.PopupIndex === 2) {
        if (index === 0) {
          this.batchOperate(1, 1, null, null, 1);
        } else {
          this.batchOperate(1, 2, null, null, 0);
        }
      } else if (this.PopupIndex === 3) {
        // 这里的index指要删除原因的下标，value->默认没有值，当index=6时，value为删除原因
        this.batchOperate(1, 3, index, value);
      }
    },
    batchOperate(i, state, delReasonIndex, delReasonDesc, j) {
      // 检查被选择对象的个数

      this.operateShow = !this.operateShow;
      // 将被选择的对象加入到后端接口参数中
      var actionRevertList = [];
      this.selecetedRows.forEach(function(item) {
        // 判断是否需要改变状态

        // if (
        //   (that.PopupIndex === 0 && item.priority !== 2) ||
        //   (that.PopupIndex === 1 && item.priority !== 1)
        // ) {
        //   actionRevertList.push(item.id);
        // } else if (that.PopupIndex === 2) {
        //   // if (
        //   //   (item.isClosed === true && state === 2) ||
        //   //   (item.isClosed === false && state === 1)
        //   // ) {
        //     actionRevertList.push({ id: item.id, version: item.version });
        // // }
        // }else{
        //   actionRevertList.push({id: item.id, version: item.version});
        // }

        // console.log(actionRevertList);
        // console.log(item);
        // 判断‘取消置顶’时不选择‘精品’，取消精品时不选择’置顶‘
        if (i === 1) {
          actionRevertList.push({ id: item.id, version: item.version });
        } else {
          if (j === 0) {
            if (that.PopupIndex === 0 && item.priority === 2) {
              actionRevertList.push(item.id);
            } else if (that.PopupIndex === 1 && item.priority === 1) {
              actionRevertList.push(item.id);
            }
          } else {
            actionRevertList.push(item.id);
          }
        }
      });

      // 调用后端接口
      // i表示接口类别，0:批量标签设置操作，1:批量话题管理操作
      if (i === 0) {
        // POST /web/bbs/batchTagManage
        this.ajax({
          type: 'POST',
          url: that.urlList[i],
          data: { tagType: state, topicIdList: actionRevertList },
          loading: true,
          success: res => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.$refs.pcPagination.queryListWithPageFn(false);
              this.successTip('更新成功', 2000);
            } else {
              this.errorTip(res.message);
            }
          }
        });
      } else {
        // POST /web/bbs/batchTopicManage
        // state为3表示话题批量删除
        if (state === 3) {
          this.ajax({
            type: 'POST',
            url: that.urlList[i],
            data: {
              actionType: state,
              deleteReasonDesc: delReasonDesc,
              deleteReasonType: delReasonIndex,
              topicInfoList: actionRevertList
            },
            loading: true,
            success: res => {
              setTimeout(() => {
                this.$pcNProgress.done();
              }, 300);
              if (res.code === 200) {
                this.$refs.pcPagination.queryListWithPageFn(false);
                this.successTip('更新成功', 2000);
              } else {
                this.errorTip(res.message);
              }
            }
          });

          // state为3以外表示话题批量关闭或启用
        } else {
          this.ajax({
            type: 'POST',
            url: that.urlList[i],
            data: { actionType: state, topicInfoList: actionRevertList },
            loading: true,
            success: res => {
              setTimeout(() => {
                this.$pcNProgress.done();
              }, 300);
              if (res.code === 200) {
                this.$refs.pcPagination.queryListWithPageFn(false);
              } else {
                this.errorTip(res.message);
              }
            }
          });
        }
      }
    },
    selectionChange(rows) {
      this.selecetedRows = rows;
    },
    // 导出数据
    exportData() {
      this.exportFile({
        type: 'POST',
        url: '/ibs/web/demand/exportDemand',
        data: this.dataQueryForm,
        loading: true,
        fileNameStart: '求购列表导出'
      });
    }
  },
  selectionChange(rows) {
    this.selecetedRows = rows;
  },
  // 导出数据
  exportData() {
    this.exportFile({
      type: 'POST',
      url: '/ibs/web/demand/exportDemand',
      data: this.dataQueryForm,
      loading: true,
      fileNameStart: '求购列表导出'
    });
  }
};
</script>
<style>
.el-dropdown-link {
  margin-left: 10px;
}
.dropdownCl {
  width: 100px;
  text-align: center;
}

.page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 146px;
  height: 146px;
  display: block;
  position: relative;
}

.operationst {
  display: inline;
  position: relative;
}

.operation-ul {
  position: absolute;
  width: 80px;
  z-index: 20;
  color: aqua;
  text-align: center;
  background: #b3b3b3;
  right: 0px;
}

.page-scan-mana
  .el-upload-list--picture-card
  .el-upload-list__item-thumbnail:before {
  content: '\E614';
  position: absolute;
  top: 18px;
  left: 40px;
  color: #b3b3b3;
  font-size: 60px;
  font-family: 'maliiconfont' !important;
}

.page-scan-mana
  .topClassEditInfo
  .el-upload-list--picture-card
  .el-upload-list__item
  .el-icon-close {
  display: none;
}

.page-scan-mana
  .topClassEditInfo
  .el-upload-list--picture-card
  .el-upload-list__item
  .el-icon-close-tip {
  display: none;
}

.page-list .demand-no {
  padding: 5px 0px !important;
}

.el-button--info.is-plain.shield {
  color: #ff2b2b !important;
  border-color: #ffd6d6 !important;
  background-color: #ffe9e9 !important;
}
</style>
